<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<ui:include src="/WEB-INF/includes/head.xhtml">
	<ui:param name="pageTitle" value="Edit routes" />
</ui:include>
<h:body>
	<ui:include src="/WEB-INF/includes/menu.xhtml" />
	<h1>Edit routes</h1>

	<!-- Error messages -->
	<p:messages id="messages" closable="true" autoUpdate="true" />

	<p:tabView id="tabView">

		<p:tab id="tab1" title="New Route">

			<p:panelGrid styleClass="noBorders">
				<p:row>
					<p:column>
						<h:form id="routeSaving">
							<p:panelGrid styleClass="noBorders">
								<p:row>
									<p:column>
										<h:outputLabel for="newRouteName" value="New route name" />
									</p:column>
									<p:column>
										<p:inputText id="newRouteName"
											value="#{editRoutes.newRouteName}" required="true"
											requiredMessage="Please insert name of new route" />
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<p:commandButton id="saveButton" value="Save" disabled="#{editRoutes.recordsCounter lt 2}">
											<f:ajax listener="#{editRoutes.save}" execute="newRouteName"
												update=":tabView:newStationsTable :tabView:formExisting:existingRouteName"
												render=":tabView:newStationsTable :tabView:formExisting:existingRouteName"/>
										</p:commandButton>
									</p:column>
								</p:row>
							</p:panelGrid>
						</h:form>

					</p:column>

					<p:column>
						<p:spacer width="100" />
					</p:column>

					<p:column>
						<h:form id="formNew">

							<p:panelGrid styleClass="noBorders">
								<p:row>
									<p:column>
										<h:outputLabel for="stationsCombobox" value="Station" />
									</p:column>
									<p:column>
										<p:selectOneMenu id="stationsCombobox"
											value="#{editRoutes.selectedStation}" required="true"
											requiredMessage="Please select station to add">
											<f:selectItem itemLabel="-- Select station --" itemValue="" />
											<f:selectItems value="#{editRoutes.stations}" var="station"
												itemValue="#{station}" />
										</p:selectOneMenu>
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<h:outputLabel for="timeAfterPrev" value="Time after previous" />
									</p:column>
									<p:column>
										<p:calendar id="timeAfterPrev"
											value="#{editRoutes.timeAfterPrev}" pattern="HH:mm"
											timeOnly="true" disabled="#{editRoutes.recordsCounter lt 1}" />
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<h:outputLabel for="timeOnStation" value="Time on station" />
									</p:column>
									<p:column>
										<p:calendar id="timeOnStation"
											value="#{editRoutes.timeOnStation}" pattern="HH:mm"
											timeOnly="true" disabled="#{editRoutes.recordsCounter lt 1}" />
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<p:commandButton value="Add">
											<f:ajax listener="#{editRoutes.add}"
												execute="stationsCombobox timeAfterPrev timeOnStation"
												update=":tabView:newStationsTable :tabView:routeSaving:saveButton stationsCombobox timeAfterPrev timeOnStation"
												render=":tabView:newStationsTable :tabView:routeSaving:saveButton stationsCombobox timeAfterPrev timeOnStation" />
										</p:commandButton>
									</p:column>
								</p:row>
							</p:panelGrid>

						</h:form>
					</p:column>
				</p:row>
			</p:panelGrid>

			<p:dataTable id="newStationsTable" var="record"
				value="#{editRoutes.newRouteRecords}" rowKey="#{record.num}"
				paginator="true" rows="10" paginatorPosition="bottom">
				<p:column headerText="#">
					<h:outputText value="#{record.num}" />
				</p:column>
				<p:column headerText="Station name">
					<h:outputText value="#{record.station}" />
				</p:column>
				<p:column headerText="Time after prev">
					<h:outputText value="#{record.timeAfterPrev}" />
				</p:column>
				<p:column headerText="Time on station">
					<h:outputText value="#{record.timeOnStation}" />
				</p:column>
			</p:dataTable>
		</p:tab>

		<p:tab id="tab2" title="Existing routes">
			<h:form id="formExisting">

				<p:panelGrid styleClass="noBorders">
					<p:row>
						<p:column>
							<h:outputLabel for="existingRouteName" value="Route name" />
						</p:column>
						<p:column>
							<p:selectOneMenu id="existingRouteName"
								value="#{editRoutes.selectedRoute}" required="true"
								requiredMessage="Please select route">
								<f:selectItem itemLabel="-- Select route --" itemValue="" />
								<f:selectItems value="#{editRoutes.routes}" var="route"
									itemValue="#{route}" />
								<f:ajax listener="#{editRoutes.updateStationsOfRoute}"
									execute="@this" update="stationsOfRouteTable"
									render="stationsOfRouteTable" />
							</p:selectOneMenu>
						</p:column>
						<p:column>
							<p:commandButton value="Delete">
								<f:ajax listener="#{editRoutes.delete}"
									execute="existingRouteName"
									update="existingRouteName stationsOfRouteTable"
									render="existingRouteName stationsOfRouteTable" />
							</p:commandButton>
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:spacer height="50" />
						</p:column>
					</p:row>
				</p:panelGrid>

				<p:dataTable id="stationsOfRouteTable" var="record"
					value="#{editRoutes.stationsOfRoute}" rowKey="#{record.num}"
					paginator="true" rows="10" paginatorPosition="bottom">
					<p:column headerText="#">
						<h:outputText value="#{record.order}" />
					</p:column>
					<p:column headerText="Station name">
						<h:outputText value="#{record.stationName}" />
					</p:column>
					<p:column headerText="Time after start">
						<h:outputText value="#{record.timeAfterStart}" />
					</p:column>
					<p:column headerText="Time on station">
						<h:outputText value="#{record.timeOnStation}" />
					</p:column>
				</p:dataTable>
			</h:form>
		</p:tab>

	</p:tabView>
</h:body>
</html>